<template>
  <header class="chat-online-header">
      <div class="title">
          {{ title }}
      </div>
      <div @click="onReturn" class="return">
          <svg-icon class="icon" name="return" />
      </div>
      <div @click="onDetail" class="detail">
          <svg-icon class="icon" name="detail" />
      </div>
  </header>
</template>

<script>
import SvgIcon from './SvgIcon.vue'
export default {
  components: { SvgIcon },
    props: {
        title: {
            type: String,
            required: true,
        }
    },
    name: 'chat-online-header',
    methods: {
        onReturn() {
            this.$emit('return')
        },
        onDetail() {
            this.$emit('detail')
        }
    }
}
</script>

<style scoped>
.icon {
    width: 100%;
    height: 100%;
}
.chat-online-header {
    width: 100%;
    height: 42px;
    flex-shrink: 0;
    background-color: rgb(244, 245, 246);
    align-items: center;
    justify-content: center;
    display: flex;
}
.chat-online-header > .title {
    position: absolute;
}
.chat-online-header > .return {
    margin: auto auto auto 10px;
    width: 20px;
    height: 20px;
}
.chat-online-header > .detail {
    margin-right: 16px;
    width: 20px;
    height: 20px;
}

</style>